<template>
  <div class="sea-tree-node" @mouseover="mouseover" @mouseout="mouseout">
    <!-- 文本展示 -->
    <span class="sea-tree-node-label pull-left"><i :class="data.icon"></i> {{ data.label }}</span>

    <!-- 节点编辑区域 -->
    <span v-show="showActionbar" class="sea-tree-node-tools sea-gap-group pull-right" @click.stop>
      <a size="small" class="text-orange" v-show="canRemove" @click="remove">删除</a>
      <a size="small" v-show="canAppend" @click="append">添加</a>
    </span>
    <div class="clearfix"></div>
  </div>
</template>

<script setup>
import {ref, watch} from 'vue';

/**
 * 树节点
 *
 * 因为当前组件的核心是 html 模版，可能需要经常调整，当前组件可以作为代码参考
 */
const props = defineProps({
    // 树节点对象
    node: {type: Object},
    // 数据对象
    data: {type: Object},
    // 最大层级限制，避免用户无限扩展树的节点
    maxLevel: {type: Number, default: undefined},
    // 追加子节点
    appendNode: {type: Function},
    // 移除子节点
    removeNode: {type: Function},
    // 修改子节点
    modifyNode: {type: Function}
});

// 是否显示操作面板
const showActionbar = ref(false);
// 是否可编辑
const canModify = ref(false);
// 是否可追加节点
const canAppend = ref(false);
// 是否可删除
const canRemove = ref(false);

watch(() => props.node, (val) => {
    if (val) {
        canModify.value = true;
    }
    if (props.maxLevel === undefined || val.level < props.maxLevel) {
        canAppend.value = true;
    }
    if (val.childNodes != null) {
        canRemove.value = true;
    }
}, {immediate: true});

/**
 * 鼠标移入
 */
const mouseover = () => {
    showActionbar.value = true;
};

/**
 * 鼠标移出
 */
const mouseout = () => {
    showActionbar.value = false;
};

/**
 * 追加节点
 */
const append = () => {
    props.appendNode(props.data, props.node);
};

/**
 * 删除节点
 */
const remove = () => {
    props.removeNode(props.data, props.node);
};

/**
 *
 * 编辑节点
 */
const modify = () => {
    props.modifyNode(props.data, props.node);
};
</script>

<style scoped>
.sea-tree-node {
    width: 100%;
}

.sea-tree-node-tools {
    margin-left: 16px;
}

.sea-tree-node-label {
}
</style>